<!--
 * @Description: 菜单组件
-->
<template>
  <div class="ehl_menu">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
      :default-active="activeIndex"
      class="_ehl_menu"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="isCollapse"
    >
      <template v-for="item in menu">
        <el-menu-item v-if="noChild(item)" :index="item[value_p]" :key="item[value_p]">
          <i :class="['iconfont', item.icon]"></i>
          <span slot="title">{{ item[label_p] }}</span>
        </el-menu-item>
        <el-submenu :index="item[value_p]" :key="item[value_p]" v-else>
          <template slot="title">
            <i :class="['iconfont', item.icon]"></i>
            <span slot="title">{{ item[label_p] }}</span>
          </template>
          <el-menu-item
            v-for="item2 in item[children_p]"
            :index="item2[value_p]"
            :key="item2[value_p]"
            >{{ item2[label_p] }}
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {
    Menu,
    Submenu,
    MenuItem,
    MenuItemGroup,
    RadioGroup,
    RadioButton,
  } from 'element-ui'
  Vue.use(Menu)
  Vue.use(Submenu)
  Vue.use(MenuItem)
  Vue.use(MenuItemGroup)
  Vue.use(RadioGroup)
  Vue.use(RadioButton)

  export default {
    props: {
      activeIndex: { type: String, default: () => '' },
      menu: {
        type: Array,
        default: () => [
          { label: 'label1', value: 'value1', icon: 'icon-a-svg42', children: null },
          {
            label: 'label2',
            value: 'value2',
            icon: 'icon-a-svg42',
            children: [
              { label: 'label21', value: 'value21' },
              { label: 'label22', value: 'value22', children: undefined },
            ],
          },
        ],
      },
      prop: {
        type: Object,
        default: () => ({ label: 'label', value: 'value', children: 'children' }),
      },
    },
    data() {
      return {
        isCollapse: true,
        label_p: this.prop['label'],
        value_p: this.prop['value'],
        children_p: this.prop['children'],
      }
    },
    mounted() {
      console.log('this.menu', this.menu)
    },
    methods: {
      noChild(item) {
        return (
          item === null ||
          item === undefined ||
          item[this.children_p] === null ||
          item[this.children_p] === undefined
        )
      },
      handleSelect(key, keyPath) {
        this.$emit('click', key, keyPath)
      },
      handleOpen(key, keyPath) {
        this.$emit('open', key, keyPath)
      },
      handleClose(key, keyPath) {
        this.$emit('close', key, keyPath)
      },
    },
  }
</script>
